"use client";

import { programApplicationFormSelectFieldSchema } from "@/lib/zod/schemas/program-application-form";
import { EditList, EditListItem } from "@/ui/partners/groups/design/edit-list";
import {
  Button,
  Modal,
  Switch,
  useMediaQuery,
  useScrollProgress,
} from "@dub/ui";
import { cn } from "@dub/utils";
import { Dispatch, SetStateAction, useId, useRef } from "react";
import { Controller, FormProvider, useForm } from "react-hook-form";
import { v4 as uuid } from "uuid";
import { z } from "zod";

type SelectFieldData = z.infer<typeof programApplicationFormSelectFieldSchema>;

type SelectFieldModalProps = {
  showModal: boolean;
  setShowModal: Dispatch<SetStateAction<boolean>>;
  defaultValues?: Partial<SelectFieldData>;
  onSubmit: (data: SelectFieldData) => void;
};

export function SelectFieldModal(props: SelectFieldModalProps) {
  return (
    <Modal showModal={props.showModal} setShowModal={props.setShowModal}>
      <SelectFieldModalInner {...props} />
    </Modal>
  );
}

function SelectFieldModalInner({
  setShowModal,
  onSubmit,
  defaultValues,
}: SelectFieldModalProps) {
  const id = useId();
  const { isMobile } = useMediaQuery();

  const form = useForm<SelectFieldData>({
    defaultValues: defaultValues ?? {
      id: uuid(),
      type: "select",
      label: "",
      required: false,
      data: {
        options: [
          {
            id: uuid(),
            value: "",
          },
        ],
      },
    },
  });

  const {
    handleSubmit,
    register,
    watch,
    setValue,
    setError,
    clearErrors,
    getValues,
    formState: { errors },
    control,
  } = form;

  const fields = watch("data.options");

  const scrollRef = useRef<HTMLDivElement>(null);
  const { scrollProgress, updateScrollProgress } = useScrollProgress(scrollRef);

  return (
    <FormProvider {...form}>
      <div className="p-4 pt-3">
        <h3 className="text-base font-semibold leading-6 text-neutral-800">
          {defaultValues ? "Edit" : "Add"} dropdown
        </h3>
        <form
          className="mt-4 flex flex-col gap-6"
          onSubmit={(e) => {
            e.stopPropagation();
            handleSubmit(async (data) => {
              if (data.data.options.length < 2) {
                setError("data.options", {
                  type: "manual",
                  message: "Requires minimum of 2 options",
                });
                return;
              }

              setShowModal(false);
              onSubmit(data);
            })(e);
          }}
        >
          {/* Label */}
          <div>
            <label
              htmlFor={`${id}-label`}
              className="flex items-center gap-2 text-sm font-medium text-neutral-700"
            >
              Input label
            </label>
            <div className="mt-2 rounded-md shadow-sm">
              <input
                id={`${id}-title`}
                type="text"
                placeholder=""
                autoFocus={!isMobile}
                className={cn(
                  "block w-full rounded-md border-neutral-300 text-neutral-900 placeholder-neutral-400 focus:border-neutral-500 focus:outline-none focus:ring-neutral-500 sm:text-sm",
                  !!errors.label &&
                    "border-red-600 focus:border-red-500 focus:ring-red-600",
                )}
                {...register("label", { required: true })}
              />
            </div>
          </div>

          {/* Required */}
          <div>
            <Controller
              name="required"
              control={control}
              render={({ field }) => (
                <label
                  className="flex items-center justify-between gap-1.5"
                  htmlFor={`${id}-required`}
                >
                  <span className="text-sm font-medium text-neutral-700">
                    Required
                  </span>
                  <Switch
                    id={`${id}-required`}
                    checked={field.value}
                    fn={field.onChange}
                    trackDimensions="radix-state-checked:bg-black focus-visible:ring-black/20 w-7 h-4"
                    thumbDimensions="size-3"
                    thumbTranslate="translate-x-3"
                  />
                </label>
              )}
            />
          </div>

          <div>
            <label
              htmlFor={`${id}-options`}
              className="mb-2 flex items-center gap-2 text-sm font-medium text-neutral-700"
            >
              Options
            </label>

            <div className="relative -my-2">
              <div
                ref={scrollRef}
                onScroll={updateScrollProgress}
                className="scrollbar-hide relative max-h-[calc(100vh-300px)] overflow-y-auto py-2"
              >
                <EditList
                  values={fields.map(({ id }) => id)}
                  addButtonLabel="Add option"
                  onAdd={() => {
                    const id = uuid();

                    const newOptions = [
                      ...fields,
                      {
                        id,
                        value: "",
                      },
                    ];

                    setValue("data.options", newOptions, { shouldDirty: true });

                    if (newOptions.length >= 2) {
                      clearErrors("data.options");
                    }

                    return id;
                  }}
                  onReorder={(updated) =>
                    setValue(
                      "data.options",
                      updated.map((id) => fields.find((f) => f.id === id)!),
                      { shouldDirty: true },
                    )
                  }
                >
                  {fields.map((field, index) => {
                    const error = errors.data?.options?.[index]?.value;

                    return (
                      <EditListItem
                        key={field.id}
                        value={field.id}
                        error={!!error?.message}
                        className={cn(
                          !error && "focus-within:border-neutral-500",
                        )}
                        title={
                          <input
                            id={`${id}-${field.id}-name`}
                            type="text"
                            placeholder="Option"
                            className={cn(
                              "my-1 block w-full rounded-md border-transparent bg-transparent py-1 text-sm text-neutral-900 placeholder-neutral-400 focus:border-transparent focus:outline-none focus:ring-0",
                            )}
                            {...register(`data.options.${index}.value`, {
                              required: "Value is required",
                            })}
                          />
                        }
                        onRemove={
                          fields.length > 1
                            ? () =>
                                setValue(
                                  "data.options",
                                  fields.filter(({ id }) => id !== field.id),
                                  { shouldDirty: true },
                                )
                            : undefined
                        }
                      />
                    );
                  })}
                </EditList>
              </div>

              {/* Bottom scroll fade */}
              <div
                className="pointer-events-none absolute bottom-0 left-0 hidden h-16 w-full bg-gradient-to-t from-white sm:block"
                style={{ opacity: 1 - Math.pow(scrollProgress, 2) }}
              />
            </div>
          </div>

          <div className="flex items-center justify-between gap-2">
            <div>
              {errors.data?.options?.message && (
                <span className="text-xs text-red-600 dark:text-red-400">
                  {errors.data?.options?.message}
                </span>
              )}
            </div>
            <div className="flex items-center gap-2">
              <Button
                onClick={() => setShowModal(false)}
                variant="secondary"
                text="Cancel"
                className="h-8 w-fit px-3"
              />
              <Button
                type="submit"
                variant="primary"
                text={defaultValues ? "Update" : "Add"}
                className="h-8 w-fit px-3"
              />
            </div>
          </div>
        </form>
      </div>
    </FormProvider>
  );
}

export function SelectFieldThumbnail() {
  return (
    <svg
      width="168"
      height="100"
      viewBox="0 0 168 100"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      className="h-auto w-full"
    >
      <rect x="0.5" y="0.5" width="167" height="99" rx="5.5" fill="white" />
      <rect x="0.5" y="0.5" width="167" height="99" rx="5.5" stroke="#E5E5E5" />
      <path
        d="M22.7457 37V30.2121H26.955V31.0937H23.7699V33.1619H26.6534V34.0402H23.7699V37H22.7457ZM29.5982 37.1127C29.2756 37.1127 28.984 37.053 28.7232 36.9337C28.4625 36.8122 28.2559 36.6365 28.1035 36.4067C27.9532 36.1769 27.8781 35.8952 27.8781 35.5616C27.8781 35.2743 27.9333 35.0379 28.0438 34.8523C28.1543 34.6667 28.3034 34.5197 28.4912 34.4115C28.6791 34.3032 28.889 34.2214 29.121 34.1662C29.353 34.111 29.5894 34.069 29.8303 34.0402C30.1352 34.0049 30.3827 33.9762 30.5727 33.9541C30.7627 33.9298 30.9008 33.8911 30.987 33.8381C31.0732 33.785 31.1162 33.6989 31.1162 33.5795V33.5563C31.1162 33.2669 31.0345 33.0426 30.871 32.8835C30.7097 32.7244 30.4688 32.6449 30.1484 32.6449C29.8148 32.6449 29.5518 32.7189 29.3596 32.867C29.1696 33.0128 29.0381 33.1752 28.9652 33.3542L28.0339 33.142C28.1443 32.8327 28.3056 32.583 28.5178 32.393C28.7321 32.2008 28.9785 32.0616 29.2569 31.9754C29.5353 31.887 29.828 31.8428 30.1352 31.8428C30.3385 31.8428 30.5539 31.8671 30.7815 31.9157C31.0113 31.9621 31.2256 32.0483 31.4245 32.1742C31.6256 32.3002 31.7902 32.4803 31.9183 32.7145C32.0465 32.9465 32.1106 33.2481 32.1106 33.6193V37H31.1428V36.304H31.103C31.0389 36.4321 30.9428 36.5581 30.8146 36.6818C30.6865 36.8056 30.5219 36.9083 30.3208 36.9901C30.1197 37.0718 29.8789 37.1127 29.5982 37.1127ZM29.8137 36.3172C30.0877 36.3172 30.3219 36.2631 30.5163 36.1548C30.713 36.0466 30.8621 35.9051 30.9638 35.7306C31.0676 35.5538 31.1196 35.3649 31.1196 35.1638V34.5076C31.0842 34.5429 31.0157 34.5761 30.9141 34.607C30.8146 34.6357 30.7008 34.6611 30.5727 34.6832C30.4445 34.7031 30.3197 34.7219 30.1982 34.7396C30.0766 34.7551 29.975 34.7683 29.8932 34.7794C29.701 34.8037 29.5253 34.8445 29.3662 34.902C29.2094 34.9594 29.0834 35.0423 28.9884 35.1506C28.8956 35.2566 28.8492 35.398 28.8492 35.5748C28.8492 35.8201 28.9398 36.0057 29.121 36.1316C29.3022 36.2554 29.5331 36.3172 29.8137 36.3172ZM37.2454 33.152L36.3472 33.3111C36.3096 33.1962 36.25 33.0868 36.1682 32.983C36.0887 32.8791 35.9804 32.794 35.8434 32.7277C35.7064 32.6615 35.5352 32.6283 35.3297 32.6283C35.049 32.6283 34.8148 32.6913 34.627 32.8172C34.4392 32.941 34.3453 33.1012 34.3453 33.2978C34.3453 33.468 34.4083 33.605 34.5342 33.7088C34.6602 33.8127 34.8634 33.8977 35.1441 33.964L35.9528 34.1496C36.4212 34.2579 36.7703 34.4247 37.0001 34.6501C37.2299 34.8755 37.3448 35.1682 37.3448 35.5284C37.3448 35.8333 37.2564 36.1051 37.0797 36.3437C36.9051 36.5802 36.6609 36.7658 36.3472 36.9006C36.0356 37.0354 35.6744 37.1027 35.2634 37.1027C34.6933 37.1027 34.2282 36.9812 33.868 36.7382C33.5079 36.4929 33.2869 36.1449 33.2051 35.6941L34.163 35.5483C34.2227 35.798 34.3453 35.9869 34.5309 36.1151C34.7165 36.241 34.9585 36.304 35.2567 36.304C35.5816 36.304 35.8412 36.2366 36.0356 36.1018C36.2301 35.9648 36.3273 35.798 36.3273 35.6013C36.3273 35.4422 36.2676 35.3086 36.1483 35.2003C36.0312 35.092 35.8511 35.0103 35.6081 34.955L34.7463 34.7661C34.2713 34.6578 33.9199 34.4855 33.6924 34.2491C33.467 34.0126 33.3543 33.7132 33.3543 33.3509C33.3543 33.0503 33.4383 32.7874 33.6062 32.562C33.7741 32.3366 34.0061 32.161 34.3022 32.035C34.5983 31.9069 34.9375 31.8428 35.3197 31.8428C35.8699 31.8428 36.303 31.9621 36.619 32.2008C36.9349 32.4372 37.1437 32.7543 37.2454 33.152ZM40.8108 31.9091V32.7045H38.0301V31.9091H40.8108ZM38.7758 30.6894H39.7668V35.5052C39.7668 35.6974 39.7955 35.8422 39.853 35.9394C39.9104 36.0344 39.9845 36.0996 40.075 36.1349C40.1679 36.1681 40.2684 36.1847 40.3767 36.1847C40.4562 36.1847 40.5258 36.1791 40.5855 36.1681C40.6451 36.157 40.6915 36.1482 40.7247 36.1416L40.9036 36.9602C40.8462 36.9823 40.7644 37.0044 40.6584 37.0265C40.5523 37.0508 40.4197 37.0641 40.2607 37.0663C39.9999 37.0707 39.7569 37.0243 39.5315 36.9271C39.3061 36.8299 39.1238 36.6796 38.9846 36.4763C38.8454 36.273 38.7758 36.0178 38.7758 35.7107V30.6894ZM44.0465 37.1027C43.5449 37.1027 43.113 36.9956 42.7506 36.7812C42.3904 36.5647 42.112 36.2609 41.9154 35.8698C41.7209 35.4765 41.6237 35.0158 41.6237 34.4877C41.6237 33.9662 41.7209 33.5066 41.9154 33.1089C42.112 32.7112 42.386 32.4007 42.7373 32.1776C43.0909 31.9544 43.5041 31.8428 43.9769 31.8428C44.2642 31.8428 44.5426 31.8903 44.8121 31.9853C45.0817 32.0803 45.3237 32.2295 45.538 32.4328C45.7523 32.636 45.9214 32.9001 46.0451 33.2249C46.1688 33.5475 46.2307 33.9397 46.2307 34.4015V34.7528H42.1838V34.0104H45.2596C45.2596 33.7497 45.2066 33.5188 45.1005 33.3177C44.9944 33.1144 44.8453 32.9542 44.6531 32.8371C44.463 32.72 44.2399 32.6615 43.9835 32.6615C43.7051 32.6615 43.4621 32.73 43.2544 32.867C43.0489 33.0017 42.8898 33.1785 42.7771 33.3973C42.6666 33.6138 42.6114 33.8491 42.6114 34.1032V34.6832C42.6114 35.0235 42.671 35.313 42.7904 35.5516C42.9119 35.7902 43.0809 35.9725 43.2975 36.0985C43.514 36.2222 43.767 36.2841 44.0565 36.2841C44.2443 36.2841 44.4155 36.2576 44.5702 36.2045C44.7249 36.1493 44.8585 36.0676 44.9712 35.9593C45.0839 35.851 45.1701 35.7173 45.2298 35.5582L46.1677 35.7273C46.0926 36.0035 45.9578 36.2454 45.7634 36.4531C45.5711 36.6586 45.3292 36.8188 45.0375 36.9337C44.7481 37.0464 44.4177 37.1027 44.0465 37.1027ZM51.1451 33.152L50.2469 33.3111C50.2094 33.1962 50.1497 33.0868 50.0679 32.983C49.9884 32.8791 49.8801 32.794 49.7431 32.7277C49.6061 32.6615 49.4349 32.6283 49.2294 32.6283C48.9488 32.6283 48.7146 32.6913 48.5268 32.8172C48.3389 32.941 48.245 33.1012 48.245 33.2978C48.245 33.468 48.308 33.605 48.434 33.7088C48.5599 33.8127 48.7632 33.8977 49.0438 33.964L49.8525 34.1496C50.3209 34.2579 50.6701 34.4247 50.8999 34.6501C51.1297 34.8755 51.2446 35.1682 51.2446 35.5284C51.2446 35.8333 51.1562 36.1051 50.9794 36.3437C50.8048 36.5802 50.5607 36.7658 50.2469 36.9006C49.9354 37.0354 49.5741 37.1027 49.1631 37.1027C48.593 37.1027 48.1279 36.9812 47.7678 36.7382C47.4076 36.4929 47.1866 36.1449 47.1049 35.6941L48.0627 35.5483C48.1224 35.798 48.245 35.9869 48.4306 36.1151C48.6162 36.241 48.8582 36.304 49.1565 36.304C49.4813 36.304 49.7409 36.2366 49.9354 36.1018C50.1298 35.9648 50.227 35.798 50.227 35.6013C50.227 35.4422 50.1674 35.3086 50.0481 35.2003C49.931 35.092 49.7509 35.0103 49.5078 34.955L48.6461 34.7661C48.171 34.6578 47.8197 34.4855 47.5921 34.2491C47.3667 34.0126 47.254 33.7132 47.254 33.3509C47.254 33.0503 47.338 32.7874 47.5059 32.562C47.6738 32.3366 47.9059 32.161 48.2019 32.035C48.498 31.9069 48.8372 31.8428 49.2195 31.8428C49.7697 31.8428 50.2027 31.9621 50.5187 32.2008C50.8347 32.4372 51.0435 32.7543 51.1451 33.152ZM54.7106 31.9091V32.7045H51.9298V31.9091H54.7106ZM52.6755 30.6894H53.6666V35.5052C53.6666 35.6974 53.6953 35.8422 53.7527 35.9394C53.8102 36.0344 53.8842 36.0996 53.9748 36.1349C54.0676 36.1681 54.1681 36.1847 54.2764 36.1847C54.3559 36.1847 54.4255 36.1791 54.4852 36.1681C54.5449 36.157 54.5913 36.1482 54.6244 36.1416L54.8034 36.9602C54.7459 36.9823 54.6642 37.0044 54.5581 37.0265C54.4521 37.0508 54.3195 37.0641 54.1604 37.0663C53.8997 37.0707 53.6566 37.0243 53.4312 36.9271C53.2058 36.8299 53.0236 36.6796 52.8844 36.4763C52.7451 36.273 52.6755 36.0178 52.6755 35.7107V30.6894ZM60.4213 37.1027C59.9285 37.1027 59.5043 36.9912 59.1486 36.768C58.795 36.5426 58.5232 36.2322 58.3332 35.8366C58.1432 35.4411 58.0482 34.9882 58.0482 34.4777C58.0482 33.9607 58.1454 33.5044 58.3398 33.1089C58.5343 32.7112 58.8083 32.4007 59.1618 32.1776C59.5154 31.9544 59.9319 31.8428 60.4113 31.8428C60.798 31.8428 61.1427 31.9146 61.4454 32.0582C61.7481 32.1997 61.9923 32.3985 62.1779 32.6548C62.3657 32.9111 62.4773 33.2105 62.5127 33.553H61.5482C61.4951 33.3144 61.3736 33.1089 61.1836 32.9366C60.9958 32.7642 60.7439 32.678 60.4279 32.678C60.1517 32.678 59.9098 32.7509 59.7021 32.8968C59.4966 33.0404 59.3364 33.2459 59.2215 33.5133C59.1066 33.7784 59.0491 34.0922 59.0491 34.4545C59.0491 34.8258 59.1055 35.1461 59.2182 35.4157C59.3309 35.6853 59.4899 35.8941 59.6954 36.0421C59.9031 36.1902 60.1473 36.2642 60.4279 36.2642C60.6157 36.2642 60.7859 36.23 60.9383 36.1615C61.093 36.0908 61.2223 35.9902 61.3261 35.8598C61.4322 35.7295 61.5062 35.5726 61.5482 35.3892H62.5127C62.4773 35.7184 62.3701 36.0123 62.1912 36.2708C62.0122 36.5294 61.7725 36.7326 61.4719 36.8807C61.1737 37.0287 60.8234 37.1027 60.4213 37.1027ZM65.054 37.1127C64.7314 37.1127 64.4397 37.053 64.179 36.9337C63.9182 36.8122 63.7117 36.6365 63.5592 36.4067C63.4089 36.1769 63.3338 35.8952 63.3338 35.5616C63.3338 35.2743 63.3891 35.0379 63.4995 34.8523C63.61 34.6667 63.7592 34.5197 63.947 34.4115C64.1348 34.3032 64.3447 34.2214 64.5767 34.1662C64.8087 34.111 65.0451 34.069 65.286 34.0402C65.5909 34.0049 65.8384 33.9762 66.0284 33.9541C66.2184 33.9298 66.3565 33.8911 66.4427 33.8381C66.5289 33.785 66.572 33.6989 66.572 33.5795V33.5563C66.572 33.2669 66.4902 33.0426 66.3267 32.8835C66.1654 32.7244 65.9246 32.6449 65.6042 32.6449C65.2705 32.6449 65.0076 32.7189 64.8153 32.867C64.6253 33.0128 64.4938 33.1752 64.4209 33.3542L63.4896 33.142C63.6001 32.8327 63.7614 32.583 63.9735 32.393C64.1878 32.2008 64.4342 32.0616 64.7126 31.9754C64.991 31.887 65.2838 31.8428 65.5909 31.8428C65.7942 31.8428 66.0096 31.8671 66.2372 31.9157C66.467 31.9621 66.6813 32.0483 66.8802 32.1742C67.0813 32.3002 67.2459 32.4803 67.3741 32.7145C67.5022 32.9465 67.5663 33.2481 67.5663 33.6193V37H66.5985V36.304H66.5587C66.4946 36.4321 66.3985 36.5581 66.2704 36.6818C66.1422 36.8056 65.9776 36.9083 65.7765 36.9901C65.5754 37.0718 65.3346 37.1127 65.054 37.1127ZM65.2694 36.3172C65.5434 36.3172 65.7776 36.2631 65.9721 36.1548C66.1687 36.0466 66.3179 35.9051 66.4195 35.7306C66.5234 35.5538 66.5753 35.3649 66.5753 35.1638V34.5076C66.5399 34.5429 66.4714 34.5761 66.3698 34.607C66.2704 34.6357 66.1566 34.6611 66.0284 34.6832C65.9003 34.7031 65.7754 34.7219 65.6539 34.7396C65.5324 34.7551 65.4307 34.7683 65.349 34.7794C65.1567 34.8037 64.9811 34.8445 64.822 34.902C64.6651 34.9594 64.5391 35.0423 64.4441 35.1506C64.3513 35.2566 64.3049 35.398 64.3049 35.5748C64.3049 35.8201 64.3955 36.0057 64.5767 36.1316C64.7579 36.2554 64.9888 36.3172 65.2694 36.3172ZM71.2627 31.9091V32.7045H68.4819V31.9091H71.2627ZM69.2276 30.6894H70.2186V35.5052C70.2186 35.6974 70.2474 35.8422 70.3048 35.9394C70.3623 36.0344 70.4363 36.0996 70.5269 36.1349C70.6197 36.1681 70.7202 36.1847 70.8285 36.1847C70.908 36.1847 70.9776 36.1791 71.0373 36.1681C71.0969 36.157 71.1434 36.1482 71.1765 36.1416L71.3555 36.9602C71.298 36.9823 71.2163 37.0044 71.1102 37.0265C71.0041 37.0508 70.8716 37.0641 70.7125 37.0663C70.4517 37.0707 70.2087 37.0243 69.9833 36.9271C69.7579 36.8299 69.5756 36.6796 69.4364 36.4763C69.2972 36.273 69.2276 36.0178 69.2276 35.7107V30.6894Z"
        fill="#262626"
      />
      <path
        d="M28.4004 45.6663H139.6C140.725 45.6663 141.55 45.6668 142.2 45.72C142.847 45.7728 143.292 45.8766 143.665 46.0667C144.355 46.4181 144.915 46.9787 145.267 47.6682C145.457 48.0412 145.56 48.4867 145.613 49.1331C145.666 49.7833 145.667 50.608 145.667 51.7336V65.5999C145.667 66.7255 145.666 67.5502 145.613 68.2004C145.56 68.8466 145.457 69.2914 145.267 69.6643C144.915 70.3541 144.355 70.9153 143.665 71.2668C143.292 71.4569 142.847 71.5607 142.2 71.6135C141.55 71.6667 140.725 71.6663 139.6 71.6663H28.4004C27.2748 71.6663 26.4501 71.6667 25.7998 71.6135C25.1535 71.5607 24.7079 71.4569 24.335 71.2668C23.6452 70.9153 23.0849 70.3541 22.7334 69.6643C22.5434 69.2914 22.4395 68.8466 22.3867 68.2004C22.3336 67.5502 22.333 66.7255 22.333 65.5999V51.7336C22.333 50.608 22.3336 49.7833 22.3867 49.1331C22.4395 48.4867 22.5434 48.0412 22.7334 47.6682C23.0849 46.9787 23.6454 46.4181 24.335 46.0667C24.7079 45.8766 25.1535 45.7728 25.7998 45.72C26.4501 45.6668 27.2748 45.6663 28.4004 45.6663Z"
        fill="white"
      />
      <path
        d="M28.4004 45.6663H139.6C140.725 45.6663 141.55 45.6668 142.2 45.72C142.847 45.7728 143.292 45.8766 143.665 46.0667C144.355 46.4181 144.915 46.9787 145.267 47.6682C145.457 48.0412 145.56 48.4867 145.613 49.1331C145.666 49.7833 145.667 50.608 145.667 51.7336V65.5999C145.667 66.7255 145.666 67.5502 145.613 68.2004C145.56 68.8466 145.457 69.2914 145.267 69.6643C144.915 70.3541 144.355 70.9153 143.665 71.2668C143.292 71.4569 142.847 71.5607 142.2 71.6135C141.55 71.6667 140.725 71.6663 139.6 71.6663H28.4004C27.2748 71.6663 26.4501 71.6667 25.7998 71.6135C25.1535 71.5607 24.7079 71.4569 24.335 71.2668C23.6452 70.9153 23.0849 70.3541 22.7334 69.6643C22.5434 69.2914 22.4395 68.8466 22.3867 68.2004C22.3336 67.5502 22.333 66.7255 22.333 65.5999V51.7336C22.333 50.608 22.3336 49.7833 22.3867 49.1331C22.4395 48.4867 22.5434 48.0412 22.7334 47.6682C23.0849 46.9787 23.6454 46.4181 24.335 46.0667C24.7079 45.8766 25.1535 45.7728 25.7998 45.72C26.4501 45.6668 27.2748 45.6663 28.4004 45.6663Z"
        stroke="#D4D4D4"
        strokeWidth="0.666667"
      />
      <path
        d="M34.5341 56.5756C34.4943 56.2397 34.333 55.979 34.0502 55.7934C33.7674 55.6078 33.4205 55.515 33.0095 55.515C32.709 55.515 32.446 55.5636 32.2206 55.6608C31.9975 55.758 31.8229 55.8917 31.697 56.0619C31.5732 56.232 31.5114 56.4253 31.5114 56.6419C31.5114 56.8231 31.5545 56.9788 31.6406 57.1092C31.729 57.2374 31.8417 57.3445 31.9787 57.4307C32.1157 57.5147 32.2593 57.5843 32.4096 57.6395C32.5598 57.6925 32.6979 57.7356 32.8239 57.7688L33.5133 57.9544C33.69 58.0008 33.8867 58.0649 34.1032 58.1466C34.322 58.2284 34.5308 58.34 34.7296 58.4814C34.9307 58.6206 35.0964 58.7996 35.2268 59.0183C35.3572 59.2371 35.4223 59.5055 35.4223 59.8237C35.4223 60.1905 35.3262 60.5219 35.134 60.818C34.944 61.1141 34.6656 61.3494 34.2988 61.524C33.9342 61.6985 33.4912 61.7858 32.9697 61.7858C32.4836 61.7858 32.0627 61.7074 31.7069 61.5505C31.3534 61.3936 31.075 61.1749 30.8717 60.8943C30.6706 60.6136 30.5568 60.2877 30.5303 59.9165H31.3788C31.4009 60.1728 31.4871 60.3849 31.6373 60.5529C31.7898 60.7186 31.982 60.8423 32.214 60.9241C32.4482 61.0036 32.7001 61.0434 32.9697 61.0434C33.2835 61.0434 33.5652 60.9926 33.8149 60.8909C34.0646 60.7871 34.2623 60.6435 34.4081 60.4601C34.554 60.2745 34.6269 60.0579 34.6269 59.8104C34.6269 59.5851 34.5639 59.4017 34.438 59.2603C34.312 59.1188 34.1463 59.0039 33.9408 58.9156C33.7353 58.8272 33.5133 58.7498 33.2746 58.6835L32.4394 58.4449C31.9091 58.2925 31.4893 58.0748 31.1799 57.792C30.8706 57.5091 30.7159 57.139 30.7159 56.6817C30.7159 56.3016 30.8187 55.9702 31.0241 55.6873C31.2318 55.4023 31.5103 55.1813 31.8594 55.0245C32.2107 54.8654 32.6029 54.7858 33.036 54.7858C33.4735 54.7858 33.8624 54.8643 34.2027 55.0211C34.5429 55.1758 34.8125 55.3879 35.0114 55.6575C35.2124 55.9271 35.3185 56.2331 35.3295 56.5756H34.5341ZM38.8022 61.7726C38.3117 61.7726 37.8885 61.6643 37.5328 61.4478C37.1793 61.229 36.9064 60.9241 36.7141 60.533C36.5241 60.1397 36.4291 59.6823 36.4291 59.1608C36.4291 58.6394 36.5241 58.1798 36.7141 57.782C36.9064 57.3821 37.1737 57.0705 37.5162 56.8474C37.8609 56.622 38.2631 56.5093 38.7227 56.5093C38.9878 56.5093 39.2496 56.5535 39.5082 56.6419C39.7667 56.7303 40.002 56.8739 40.2141 57.0728C40.4263 57.2694 40.5953 57.5301 40.7212 57.855C40.8472 58.1798 40.9102 58.5797 40.9102 59.0548V59.3862H36.9859V58.7101H40.1147C40.1147 58.4228 40.0573 58.1665 39.9424 57.9411C39.8297 57.7157 39.6684 57.5379 39.4585 57.4075C39.2508 57.2771 39.0055 57.212 38.7227 57.212C38.4111 57.212 38.1415 57.2893 37.9139 57.444C37.6886 57.5964 37.5151 57.7953 37.3936 58.0406C37.2721 58.2858 37.2113 58.5488 37.2113 58.8294V59.2801C37.2113 59.6646 37.2776 59.9905 37.4102 60.2579C37.5449 60.523 37.7317 60.7252 37.9703 60.8644C38.2089 61.0014 38.4862 61.0699 38.8022 61.0699C39.0077 61.0699 39.1933 61.0412 39.359 60.9837C39.5269 60.9241 39.6717 60.8357 39.7932 60.7186C39.9147 60.5993 40.0086 60.4512 40.0749 60.2745L40.8306 60.4866C40.7511 60.7429 40.6174 60.9683 40.4296 61.1627C40.2418 61.355 40.0097 61.5052 39.7335 61.6135C39.4573 61.7195 39.1469 61.7726 38.8022 61.7726ZM42.8822 54.8786V61.6665H42.1V54.8786H42.8822ZM46.4493 61.7726C45.9588 61.7726 45.5357 61.6643 45.1799 61.4478C44.8264 61.229 44.5535 60.9241 44.3613 60.533C44.1712 60.1397 44.0762 59.6823 44.0762 59.1608C44.0762 58.6394 44.1712 58.1798 44.3613 57.782C44.5535 57.3821 44.8209 57.0705 45.1634 56.8474C45.5081 56.622 45.9102 56.5093 46.3698 56.5093C46.6349 56.5093 46.8968 56.5535 47.1553 56.6419C47.4138 56.7303 47.6491 56.8739 47.8613 57.0728C48.0734 57.2694 48.2424 57.5301 48.3684 57.855C48.4943 58.1798 48.5573 58.5797 48.5573 59.0548V59.3862H44.6331V58.7101H47.7618C47.7618 58.4228 47.7044 58.1665 47.5895 57.9411C47.4768 57.7157 47.3155 57.5379 47.1056 57.4075C46.8979 57.2771 46.6526 57.212 46.3698 57.212C46.0582 57.212 45.7887 57.2893 45.5611 57.444C45.3357 57.5964 45.1622 57.7953 45.0407 58.0406C44.9192 58.2858 44.8584 58.5488 44.8584 58.8294V59.2801C44.8584 59.6646 44.9247 59.9905 45.0573 60.2579C45.1921 60.523 45.3788 60.7252 45.6174 60.8644C45.8561 61.0014 46.1334 61.0699 46.4493 61.0699C46.6548 61.0699 46.8404 61.0412 47.0062 60.9837C47.1741 60.9241 47.3188 60.8357 47.4403 60.7186C47.5619 60.5993 47.6558 60.4512 47.7221 60.2745L48.4777 60.4866C48.3982 60.7429 48.2645 60.9683 48.0767 61.1627C47.8889 61.355 47.6569 61.5052 47.3807 61.6135C47.1045 61.7195 46.794 61.7726 46.4493 61.7726ZM51.8153 61.7726C51.3381 61.7726 50.9271 61.6599 50.5824 61.4345C50.2377 61.2091 49.9725 60.8987 49.7869 60.5032C49.6013 60.1076 49.5085 59.6558 49.5085 59.1476C49.5085 58.6305 49.6035 58.1742 49.7936 57.7787C49.9858 57.381 50.2532 57.0705 50.5956 56.8474C50.9403 56.622 51.3425 56.5093 51.8021 56.5093C52.16 56.5093 52.4826 56.5756 52.7699 56.7082C53.0571 56.8407 53.2925 57.0264 53.4759 57.265C53.6593 57.5036 53.773 57.782 53.8172 58.1002H53.035C52.9754 57.8682 52.8428 57.6627 52.6373 57.4837C52.434 57.3026 52.16 57.212 51.8153 57.212C51.5104 57.212 51.2431 57.2915 51.0133 57.4506C50.7857 57.6075 50.6078 57.8295 50.4796 58.1168C50.3537 58.4018 50.2907 58.7366 50.2907 59.121C50.2907 59.5144 50.3526 59.8568 50.4763 60.1485C50.6023 60.4402 50.779 60.6667 51.0066 60.828C51.2364 60.9893 51.506 61.0699 51.8153 61.0699C52.0186 61.0699 52.2031 61.0346 52.3688 60.9639C52.5346 60.8931 52.6749 60.7915 52.7898 60.6589C52.9047 60.5264 52.9864 60.3673 53.035 60.1817H53.8172C53.773 60.4822 53.6637 60.7528 53.4891 60.9937C53.3168 61.2323 53.0881 61.4223 52.803 61.5638C52.5202 61.703 52.191 61.7726 51.8153 61.7726ZM57.1747 56.5756V57.2385H54.5365V56.5756H57.1747ZM55.3054 55.3559H56.0876V60.2082C56.0876 60.4291 56.1196 60.5948 56.1837 60.7053C56.25 60.8136 56.334 60.8865 56.4356 60.9241C56.5395 60.9594 56.6488 60.9771 56.7637 60.9771C56.8499 60.9771 56.9206 60.9727 56.9759 60.9639C57.0311 60.9528 57.0753 60.944 57.1084 60.9373L57.2675 61.64C57.2145 61.6599 57.1405 61.6798 57.0455 61.6996C56.9504 61.7217 56.83 61.7328 56.6842 61.7328C56.4632 61.7328 56.2467 61.6853 56.0346 61.5903C55.8247 61.4953 55.6501 61.3505 55.5109 61.1561C55.3739 60.9616 55.3054 60.7164 55.3054 60.4203V55.3559Z"
        fill="#A1A1A1"
      />
      <path
        d="M134.944 57.1395L132.999 55.1951L131.055 57.1395"
        stroke="#A1A1A1"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
      <path
        d="M134.944 60.1951L132.999 62.1395L131.055 60.1951"
        stroke="#A1A1A1"
        strokeLinecap="round"
        strokeLinejoin="round"
      />
    </svg>
  );
}
